// @flow
import React, { Component } from 'react'
import styles from './ResumeTab.css'
type State = {
  categories: Array<Object>
}
type Props = {
  types: Array<Object>,
  onChange: Function
}
export class ResumeTab extends Component {
  props: Props
  state: State
  constructor (props: Props) {
    super(props)
    this.state = {
      categories: this.props.types
    }
  }
  componentWillReceiveProps (nextProps: Props) {
    this.setState({
      categories: nextProps.types
    })
  }
  toggleAct (index: number) {
    return () => {
      const { categories } = this.state
      categories[index].active = !categories[index].active
      this.setState({
        categories
      }, () => {
        let values = []
        this.state.categories.map((d, i) => {
          if (d.active === true) {
            values.push(d.value)
          }
        })
        this.props.onChange(values)
      })
    }
  }
  render () {
    const { categories } = this.state
    return (
      <div className={styles['toolbar']}>
        <ul>
          {categories.map((cate, index) => {
            return <li key={index} className={cate.active ? styles['active'] : ''} onClick={this.toggleAct(index)} >
              <svg height='20' width='20'>
                <circle cx='10' cy='12' r='5' fill={cate.color} />
              </svg>
              {cate.label}
            </li>
          })}
        </ul>
      </div>
    )
  }
}

export default ResumeTab
